/* eslint-disable */
import React from 'react';
import styles from './ArticleSearch.less'
import Header from './components/common/Header';

import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import InputBase from '@material-ui/core/InputBase';
import Divider from '@material-ui/core/Divider';
import PropTypes from 'prop-types';
import SwipeableViews from 'react-swipeable-views';
import { useTheme } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';


import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import ListItemAvatar from '@material-ui/core/ListItemAvatar';
import Avatar from '@material-ui/core/Avatar';


const useStyles = makeStyles((theme) => ({
    root: {
        padding: '2px 4px',
        display: 'flex',
        alignItems: 'center',
        width: 400,
    },
    input: {
        marginLeft: theme.spacing(1),
        flex: 1,
    },
    iconButton: {
        padding: 10,
    },
    divider: {
        height: 28,
        margin: 4,
    },
}));

function CustomizedInputBase() {
    const classes = useStyles();
    return (
        <Paper component="form" className={classes.root}>
            <InputBase
                className={classes.input}
                placeholder="垃圾分类"
                inputProps={{ 'aria-label': 'search garbage' }}
            />
            <span>搜索</span>
            <Divider className={classes.divider} orientation="vertical" />
            <span>高级搜索</span>
        </Paper>


    );
}

function TabPanel(props) {
    const { children, value, index, ...other } = props;

    return (
        <div
            role="tabpanel"
            hidden={value !== index}
            id={`full-width-tabpanel-${index}`}
            aria-labelledby={`full-width-tab-${index}`}
            {...other}
        >
            {value === index && (
                <Box p={2}>
                    <Typography>{children}</Typography>
                </Box>
            )}
        </div>
    );
}

TabPanel.propTypes = {
    children: PropTypes.node,
    index: PropTypes.any.isRequired,
    value: PropTypes.any.isRequired,
};

function a11yProps(index) {
    return {
        id: `full-width-tab-${index}`,
        'aria-controls': `full-width-tabpanel-${index}`,
    };
}


function FullWidthTabs() {
    const theme = useTheme();
    const [value, setValue] = React.useState(0);

    const handleChange = (event, newValue) => {
        setValue(newValue);
    };

    const handleChangeIndex = (index) => {
        setValue(index);
    };

    return (
        <div>
            <AppBar position="static" color="default">
                <Tabs
                    value={value}
                    onChange={handleChange}
                    indicatorColor="primary"
                    textColor="primary"
                    variant="fullWidth"
                    aria-label="full width tabs example"
                >
                    <Tab label="一周内" {...a11yProps(0)} />
                    <Tab label="一月内" {...a11yProps(1)} />
                    <Tab label="一年内" {...a11yProps(2)} />
                    <Tab label="不限" {...a11yProps(3)} />
                </Tabs>
            </AppBar>
            <SwipeableViews
                axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}
                index={value}
                onChangeIndex={handleChangeIndex}
            >
                <TabPanel value={value} index={0} dir={theme.direction}>
                    <AlignItemsList />
                </TabPanel>
                <TabPanel value={value} index={1} dir={theme.direction}>
                    <AlignItemsList />
                </TabPanel>
                <TabPanel value={value} index={2} dir={theme.direction}>
                    <AlignItemsList />
                </TabPanel>
                <TabPanel value={value} index={3} dir={theme.direction}>
                    <AlignItemsList />
                </TabPanel>
            </SwipeableViews>
        </div>
    );
}



function AlignItemsList() {
    const classes = makeStyles((theme) => ({
        root: {
            width: '100%',
            maxWidth: '36ch',
            backgroundColor: theme.palette.background.paper,
        },
        inline: {
            display: 'inline',
        },
    }));

    return (
        <List className={classes.root}>
            <ListItem alignItems="flex-start">
                <ListItemText
                    primary="关于绍兴市垃圾分类的指导意见"
                    secondary={
                        <React.Fragment>
                            <Typography
                                component="span"
                                variant="body2"
                                className={classes.inline}
                                color="textPrimary"
                            >
                                关于绍兴市垃圾分类的指导意见关于绍兴市垃圾分类的指导意见关于绍兴市垃圾分类的指导意见关于绍兴市垃圾分类的指导意见关于绍兴市垃圾分类的指导意见关于绍兴市垃圾分类的指导意见关于绍兴市垃圾分类的指导意见关于绍兴市垃圾分类的指导意见关于绍兴市垃圾分类的指导意见
            </Typography>
                            {/* {" — I'll be in your neighborhood doing errands this…"} */}
                            <div className={styles.twoItemFlex}>
                                <span>绍兴市人民政府</span>
                                <span>2019-10-19</span>
                            </div>
                        </React.Fragment>
                    }
                />
            </ListItem>
            <Divider variant="inset" component="li" />
            <ListItem alignItems="flex-start">
                <ListItemText
                    primary="关于绍兴市垃圾分类的指导意见"
                    secondary={
                        <React.Fragment>
                            <Typography
                                component="span"
                                variant="body2"
                                className={classes.inline}
                                color="textPrimary"
                            >
                                关于绍兴市垃圾分类的指导意见关于绍兴市垃圾分类的指导意见关于绍兴市垃圾分类的指兴市垃圾分类的指导意见关于绍兴市垃
            </Typography>
                            {/* {" — I'll be in your neighborhood doing errands this…"} */}
                            <div className={styles.twoItemFlex}>
                                <span>绍兴市人民政府</span>
                                <span>2019-10-19</span>
                            </div>
                        </React.Fragment>
                    }
                />
            </ListItem>
            <Divider variant="inset" component="li" />
            <ListItem alignItems="flex-start">
                <ListItemText
                    primary="关于绍兴市垃圾分类的指导意见"
                    secondary={
                        <React.Fragment>
                            <Typography
                                component="span"
                                variant="body2"
                                className={classes.inline}
                                color="textPrimary"
                            >
                                关于绍兴市垃圾分类的指导意见关于绍兴市垃圾分类的指导意见关于绍兴市垃圾分类的指兴市垃圾分类的指导意见关于绍兴市垃
            </Typography>
                            {/* {" — I'll be in your neighborhood doing errands this…"} */}
                            <div className={styles.twoItemFlex}>
                                <span>绍兴市人民政府</span>
                                <span>2019-10-19</span>
                            </div>
                        </React.Fragment>
                    }
                />
            </ListItem>
            <Divider variant="inset" component="li" />
            <ListItem alignItems="flex-start">
                <ListItemText
                    primary="关于绍兴市垃圾分类的指导意见"
                    secondary={
                        <React.Fragment>
                            <Typography
                                component="span"
                                variant="body2"
                                className={classes.inline}
                                color="textPrimary"
                            >
                                关于绍兴市垃圾分类的指导意见关于绍兴市垃圾分类的指导意见关于绍兴市垃圾分类的指兴市垃圾分类的指导意见关于绍兴市垃
            </Typography>
                            {/* {" — I'll be in your neighborhood doing errands this…"} */}
                            <div className={styles.twoItemFlex}>
                                <span>绍兴市人民政府</span>
                                <span>2019-10-19</span>
                            </div>
                        </React.Fragment>
                    }
                />
            </ListItem>
        </List>

    );
}

export default class ArticleSearch extends React.Component {
    render() {
        return (
            <div>
                {/* <Header title="综合服务查询" /> */}
                <div className={styles.main}>
                    <CustomizedInputBase />
                    <FullWidthTabs />
                </div>
            </div>

        );
    }
}
